﻿@page "/smith-chart/print-and-export"
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample explores the exporting and printing functionality in the smith chart.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to export and print the rendered smith chart. Smith chart can be exported to <b>JPEG, PNG, SVG </b> and <b>PDF</b> formats.</p>
    <p>More information about smithchart can be found in this<a target='_blank' href='https://ej2.syncfusion.com/blazor/documentation/smith-chart/getting-started'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfSmithChart @ref="@chart">
        <SmithChartHorizontalAxis>
            <SmithChartHorizontalMinorGridLines Visible="true"></SmithChartHorizontalMinorGridLines>
        </SmithChartHorizontalAxis>
        <SmithChartRadialAxis>
            <SmithChartRadialMinorGridLines Visible="true"></SmithChartRadialMinorGridLines>
        </SmithChartRadialAxis>
        <SmithChartSeriesCollection>
            <SmithChartSeries Name="Transmission" EnableAnimation="true" DataSource="@SmithchartSeries" Resistance="resistance" Reactance="reactance">
                <SmithChartSeriesTooltip Visible="true"></SmithChartSeriesTooltip>
                <SmithChartSeriesMarker Shape="Shape.Circle" Visible="true">
                    <SmithChartSeriesMarkerBorder Width="2"></SmithChartSeriesMarkerBorder>
                </SmithChartSeriesMarker>
            </SmithChartSeries>
            <SmithChartLegendSettings Visible="true" Shape="Shape.Circle"></SmithChartLegendSettings>
        </SmithChartSeriesCollection>
    </SfSmithChart>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width: 120%">
                <tbody>
                    <tr style="height: 50px">
                        <td style="width: 40%">
                            <div class="property-text">Export Type</div>
                        </td>
                        <td style="width: 60%;">
                            <div style="margin-left: -10px">
                                <SfDropDownList TValue="string" TItem="Typelist" DataSource="@FileTypes" @bind-Value="@fileType" Width="65%">
                                    <DropDownListEvents TValue="string" TItem="Typelist" ValueChange="SmithValueChange"></DropDownListEvents>
                                    <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>
                                </SfDropDownList>
                            </div>
                        </td>
                    </tr>
                    <tr style="height: 50px">
                        <td style="width: 40%">
                            <div class="property-text">File Name</div>
                        </td>
                        <td style="width: 60%;">
                            <div class="e-float-input" style="margin-top: 0px;  margin-left: -10px;width:70%">
                                <SfTextBox Value="@fileName" ValueChange="@NameChange" Placeholder="Smith chart"></SfTextBox>
                            </div>
                        </td>
                    </tr>
                    <tr style="height: 50px">
                        <td style="width: 50%;padding-left: 7%;">
                            <SfButton OnClick="ExportClick" CssClass="e-info" IsToggle="true" IsPrimary="true">Export</SfButton>
                        </td>
                        <td style="width: 50%;">
                            <SfButton OnClick="PrintClick" CssClass="e-info" IsToggle="true" IsPrimary="true">Print</SfButton>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code {
    SfSmithChart chart { get; set; }
    private String fileType { get; set; } = "JPEG";
    private String fileName { get; set; } = "Smith chart";
    public class SmithDataSource
    {
        public Double resistance { get; set; }
        public Double reactance { get; set; }
    };
    private List<SmithDataSource> SmithchartSeries = new List<SmithDataSource> {
    new SmithDataSource { resistance= 0.15, reactance= 0.01 },
    new SmithDataSource { resistance= 0.15, reactance= 0.15 },
    new SmithDataSource { resistance= 0.18, reactance= 0.3 },
    new SmithDataSource { resistance= 0.2, reactance= 0.4 },
    new SmithDataSource { resistance= 0.25, reactance= 0.6 },
    new SmithDataSource { resistance= 0.38, reactance= 0.95 },
    new SmithDataSource { resistance= 0.6, reactance= 1.25 },
    new SmithDataSource { resistance= 1, reactance= 1.6 },
    new SmithDataSource { resistance= 1.65, reactance= 1.9 },
    new SmithDataSource { resistance= 2.75, reactance= 2 },
    new SmithDataSource { resistance= 4.5, reactance= 0.01 },
    new SmithDataSource { resistance= 3, reactance= -2 },
    new SmithDataSource { resistance= 1.65, reactance= -1.95 },
    new SmithDataSource { resistance= 1, reactance= -1.65 },
    new SmithDataSource { resistance= 0.6, reactance= -1.25 },
    new SmithDataSource { resistance= 0.35, reactance= -0.9 },
    new SmithDataSource { resistance= 0.25, reactance= -0.6 },
    new SmithDataSource { resistance= 0.25, reactance= -0.4 },
    new SmithDataSource { resistance= 0.25, reactance= -0.3 },
    new SmithDataSource { resistance= 0.25, reactance= -0.15 },
    new SmithDataSource { resistance= 0.25, reactance= 0.01 },
    };
    public class Typelist
    {
        public String Name { get; set; }
    }
    private List<Typelist> FileTypes = new List<Typelist> {
        new Typelist { Name="JPEG" },
        new Typelist { Name="PNG" },
        new Typelist { Name="SVG" },
        new Typelist { Name="PDF" }
    };
    private void SmithValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Typelist> args)
    {
        fileType = args.Value;
    }
    private void NameChange(Syncfusion.Blazor.Inputs.ChangedEventArgs args)
    {
        fileName = args.Value;
    }
    private async Task ExportClick()
    {
        ExportType exportFileType = ExportType.JPEG;
        switch (fileType)
        {
            case "JPEG":
                exportFileType = ExportType.JPEG;
                break;
            case "PNG":
                exportFileType = ExportType.PNG;
                break;
            case "SVG":
                exportFileType = ExportType.SVG;
                break;
            case "PDF":
                exportFileType = ExportType.PDF;
                break;
        }
        await chart.ExportAsync(exportFileType, fileName);
    }
    private async Task PrintClick()
    {
        await chart.PrintAsync();
    }
}